/**
 * Created by 86185 in 2020/8/30 on 9:39
 */
import React from "react"

import "@/components/common/BrokenLineChart/BrokenLineChart.component.styl"

class BrokenLineChart extends React.Component {
    constructor(props) {
        super(props);
    }

    initChart() {
        let {id, xData, yName, seriesName, seriesData} = this.props.brokenLineData;
        let myChart = echarts.init(document.getElementById(`${id}-broken-line-chart`));

        let option = {
            grid: {
                left: "15%",
                bottom: "20%",
                top: "20%",
                right: "5%"
            },
            tooltip: {
                trigger: "item",
                textStyle: {
                    fontSize: 12,
                },
                formatter: "{a} <br/>{b}：{c}"
            },
            xAxis: {
                type: "category",
                data: xData,
                axisLabel: {
                    color: "#bfbebe",
                    rotate: 45
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: "#bfbebe",
                    }
                },
            },
            yAxis: {
                name: yName,
                nameTextStyle: {
                    padding: [0, 0, 0, 80],
                    color: "#bfbebe",
                },
                type: "value",
                offset: 20,
                axisLabel: {
                    color: "#bfbebe",
                    align: "left",
                    formatter: function (value) {
                        return value.toString();
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(28,103,166,0.3)",
                    }
                }
            },
            series: [
                {
                    name: seriesName,
                    symbol: "circle",
                    symbolSize: 11,
                    lineStyle: {
                        color: "#02CDE6"
                    },
                    itemStyle: {
                        color: "#02CDE6"
                    },
                    markPoint: {
                        symbol: "pin",
                        // symbol:"'image://http://xxx.xxx.xxx/a/b.png'",
                        symbolSize: [61, 25],
                        itemStyle: {
                            color: "#FF8D00"
                        },
                        data: [
                            {
                                name: '最大值',
                                type: 'max'
                            }
                        ]
                    },
                    data: seriesData,
                    type: "line"
                }
            ]
        };
        window.onresize = function () {
            myChart.resize();
        }
        myChart.setOption(option);
    }

    componentDidMount() {
        this.initChart();
    }

    render() {
        return (
            <div id={`${this.props.brokenLineData.id}-broken-line-chart`} className="broken-line-chart">

            </div>
        )
    }
}

export default BrokenLineChart